<template>
  <!-- index name-->
  <div>
    <!-- <el-cascader v-model="queryParams.managecome" @change="handleChange" @expand-change="expandChange"
      :props="{ value: 'comcode', label: 'comcode', children: 'chilDren', checkStrictly: true, emitPath: false }"
      :options="organizationList" @getCheckedNodes="getCheckedNodes" ref="casc" /> -->
    <Card>
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item prop="yearMonth" label="">
              <el-date-picker v-model="queryParams.yearMonth" type="month" placeholder="选择月" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="managecome" label="">
              <!-- <Cascader v-model="queryParams.managecome" change-on-select :data="organizationList" placeholder="渠道"
                clearable style="width: 100%;">
              </Cascader> -->
              <el-select v-model="queryParams.managecome" placeholder="渠道" style="width: 100%;">
                <el-option v-for="item in aaMa" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="">
              <el-button type="primary" @click="search">查询
              </el-button>
              <el-button type="info" plain @click="resetQuery">重置
              </el-button>
              <el-button type="primary" plain @click="uploadExcel">品质录入
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Card>
    <Card style="margin-top: 20px;">
      <!-- <div style="text-align: end;">
        <Button type="primary" class="resetButton" @click="uploadExcel">品质录入</Button>
      </div>margin-top: 20px; -->
      <el-table v-loading="loading" :data="tableList" style="width: 100%;">
        <el-table-column type="index" width="55" align="center" label="序号" fixed="left" />
        <el-table-column label="品质年月" align="center" prop="aaa" />
        <el-table-column label="渠道名称" align="center" prop="bbb" min-width="130" />
        <el-table-column label="品质类型" align="center" prop="ccc" />
        <el-table-column label="调整情况" align="center" prop="ddd" />
        <el-table-column label="详情" align="left" prop="eee" min-width="200" />
        <el-table-column label="记录人" align="center" prop="fff" />
        <!--  class-name="small-padding fixed-width" -->
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="uploadExcel(scope.row)">编辑
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </Card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: 3,
      loading: false,
      organizationList: [],
      queryParams: {
        managecome: [],
      },
      tableList: [{
        aaa: '2023年06月', bbb: 'I云保', ccc: '客户投诉', ddd: '升级', eee: '工作态度', fff: '奚云峰',
      }, {
        aaa: '2023年02月', bbb: '慧择', ccc: '客户投诉', ddd: '降级', eee: '客户投诉3023白', fff: '黄睿肃',
      }, {
        aaa: '2022年12月', bbb: '明亚经纪', ccc: '服务品质', ddd: '降级', eee: '客户投诉3023白', fff: '奚云峰',
      },],
    }
  },
  created() {
    this.getAllOrganization()
  },
  methods: {
    search() { },
    getList() { },
    resetQuery() { },
    handleUpdate() { },
    handleDelete() { },
    // 品质录入
    uploadExcel() {
      this.$router.push({
        path: "record"
      });
    },
    getAllOrganization() {
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          // this.organizationList = [res.data]
          // return
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    },
  }
}
</script>

<style lang="less" scoped></style>